<template>
  <div id="page">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10,20, 30, 40, 50]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="allList.length"
    ></el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // allList: [],
      currentList: [],
      currentPage: 1,
      SizeChangeLength: 10
    };
  },
  props: ["allList"],
  methods: {
    handleSizeChange(val) {
      this.SizeChangeLength =
        val < this.allList.length ? val : this.allList.length;
      //每一页显示多少条
      this.currentList = [];
      for (let i = 0; i < this.SizeChangeLength; i++) {
        this.currentList.push(this.allList[i]);
      }
      this.$emit("parentCurrentList", this.currentList);
    },
    handleCurrentChange(val) {
      this.currentList = [];
      let SizeChangeLength =
        this.SizeChangeLength * val > this.allList.length
          ? this.allList.length
          : this.SizeChangeLength * val;
      for (
        let i = this.SizeChangeLength * (val - 1);
        i < SizeChangeLength;
        i++
      ) {
        this.currentList.push(this.allList[i]);
      }
      this.$emit("parentCurrentList", this.currentList);
    }
  }
};
</script>

<style lang="stylus" scoped>
#page {
  margin-top: 20px;
}
</style>
